<template>
  <div class="student-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-main">
          <div class="title-section">
            <h1 class="page-title">
              <el-icon class="title-icon">
                <User />
              </el-icon>
              学生信息
            </h1>
            <p class="page-description">维护并管理系统学生基本信息</p>
          </div>
          <div class="header-stats">
            <div class="stat-card">
              <div class="stat-number">{{ tableData.length }}</div>
              <div class="stat-label">当前显示</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ pagination.total }}</div>
              <div class="stat-label">总学生数</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作栏 -->
    <div class="action-bar">
      <div class="action-left">
        <el-button type="primary" @click="handleAdd" class="action-btn primary-btn">
          <el-icon>
            <Plus />
          </el-icon>
          <span>添加学生</span>
        </el-button>

        <el-button @click="handleImport" class="action-btn import-btn">
          <el-icon>
            <Upload />
          </el-icon>
          <span>批量导入</span>
        </el-button>

        <el-button @click="handleExport" class="action-btn export-btn">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出数据</span>
        </el-button>

        <el-button @click="handleRefresh" class="action-btn refresh-btn">
          <el-icon>
            <Refresh />
          </el-icon>
          <span>刷新</span>
        </el-button>
      </div>

      <div class="action-right">
        <div class="search-container">
          <el-select v-model="filterClass" placeholder="选择学校" clearable style="width: 150px; margin-right: 12px;">
            <el-option label="全部学校" value="" />
            <el-option label="清华大学" value="清华大学" />
            <el-option label="重庆大学" value="重庆大学" />
            <el-option label="燕山大学" value="燕山大学" />
            <el-option label="北京邮电大学" value="北京邮电大学" />
            <el-option label="同济大学" value="同济大学" />
            <el-option label="南开大学" value="南开大学" />
          </el-select>
          <el-input v-model="searcherStudentCode" placeholder="搜索学号" :prefix-icon="Search" clearable
            class="search-input" @clear="handleSearch" @keyup.enter="handleSearch" />
            
          <el-input v-model="searchName" placeholder="搜索姓名" :prefix-icon="Search" clearable
            class="search-input" @clear="handleSearch" @keyup.enter="handleSearch" />
            
          <el-button type="primary" @click="handleSearch" class="search-btn">
            搜索
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <div class="table-wrapper">
        <el-table :key="tableData.length" :data="tableData" style="width: 100%" v-loading="loading" row-key="id" stripe
          border class="enhanced-table" :loading-text="'数据加载中...'">
          <el-table-column type="selection" width="55" />

          <el-table-column prop="id" label="ID" width="80" align="center">
            <template #default="{ row }">
              <el-tag size="small" type="info" class="id-tag">#{{ row.id }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="avatar" label="头像" width="100">
            <template #default="{ row }">
              <div class="avatar-container">
                <el-avatar :src="row.avatar" :alt="row.name" class="user-avatar" />
                <div class="avatar-status" :class="{ 'online': row.status === '在校' }"></div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="studentCode" label="学号" width="120" align="center">
            <template #default="{ row }">
              <code class="student-id">{{ row.studentCode }}</code>
            </template>
          </el-table-column>

          <el-table-column prop="username" label="用户名" width="120">
            <template #default="{ row }">
              <div class="name-cell">
                <span class="name-text">{{ row.username }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="realName" label="姓名" width="120">
            <template #default="{ row }">
              <div class="name-cell">
                <span class="name-text">{{ row.realName }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="gender" label="性别" width="80">
            <template #default="{ row }">
              <el-tag :type="row.gender === '男' ? 'primary' : 'success'" class="gender-tag">
                {{ row.gender }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="school" label="学校" width="120">
            <template #default="{ row }">
              <el-tag size="small" class="class-tag">{{ row.school }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="major" label="专业" width="150">
            <template #default="{ row }">
              <div class="major-cell">
                <el-icon class="major-icon">
                  <Notebook />
                </el-icon>
                <span>{{ row.major }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="phone" label="电话" width="130">
            <template #default="{ row }">
              <div class="phone-cell">
                <el-icon class="phone-icon">
                  <Phone />
                </el-icon>
                <span>{{ row.phone }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="email" label="邮箱" width="180">
            <template #default="{ row }">
              <div class="email-cell">
                <el-icon class="email-icon">
                  <Message />
                </el-icon>
                <span>{{ row.email }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)" class="status-tag"
                :class="{ 'status-active': row.status === '在校', 'status-inactive': row.status !== '在校' }">
                <el-icon class="status-icon">
                  <CircleCheck v-if="row.status === '在校'" />
                  <CircleClose v-else />
                </el-icon>
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="birthday" label="生日" width="120">
            <template #default="{ row }">
              <div class="time-cell">
                <el-icon class="time-icon">
                  <Calendar />
                </el-icon>
                <span>{{ row.birthday }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="270" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <template v-if="row.status === '在校'">
                <el-button size="small" type="primary" @click="handleEdit(row)" class="action-btn-small edit-btn">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  编辑
                </el-button>

                <el-button size="small" type="warning" @click="handleResetPassword(row)"
                  class="action-btn-small reset-btn">
                  <el-icon>
                    <Key />
                  </el-icon>
                  重置密码
                </el-button>

                <el-button size="small" type="danger" @click="handleDelete(row)"
                  class="action-btn-small delete-btn">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除
                </el-button>
                </template>

              <template v-else>
                  <el-button size="small" type="success" @click="handleEnable(row)" class="action-btn-small enable-btn">
                    <el-icon>
                      <CircleCheck />
                    </el-icon>
                    启用
                  </el-button>
                </template>  
              </div>
            </template>
          </el-table-column>

          <template #empty>
            <div class="empty-container">
              <div v-if="loading" class="loading-content">
                <el-icon class="loading-icon">
                  <Loading />
                </el-icon>
                <span>数据加载中...</span>
              </div>
              <div v-else class="empty-content">
                <el-icon class="empty-icon">
                  <DocumentDelete />
                </el-icon>
                <span>暂无数据</span>
              </div>
            </div>
          </template>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" class="enhanced-pagination" />
        </div>
      </div>
    </div>

    <!-- 学生表单抽屉 -->
    <StudentFormDrawer v-model:visible="drawerVisible" 
    :student-data="currentStudent" 
    :is-edit="isEditMode"
      @submit="handleFormSubmit" />

    <!-- 重置密码表单抽屉 -->
    <el-drawer v-model="resetPasswordVisible" title="重置密码" direction="rtl" size="500px"
      :before-close="handleResetPasswordClose" class="reset-password-drawer">
      <template #header>
        <div class="drawer-header">
          <el-icon class="drawer-icon">
            <Key />
          </el-icon>
          <span class="drawer-title">重置密码</span>
        </div>
      </template>

      <div class="drawer-content">
        <div class="admin-info-card">
          <el-avatar :src="currentResetAdmin.avatar" class="admin-avatar" />
          <div class="admin-details">
            <h3>{{ resetPasswordForm.name }}</h3>
            <p>{{ resetPasswordForm.email }}</p>
          </div>
        </div>

        <el-form ref="resetPasswordFormRef" :model="resetPasswordForm" :rules="resetPasswordRules" label-width="100px"
          label-position="top" class="reset-form">
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="resetPasswordForm.newPassword" type="password" placeholder="请输入新密码" show-password
              class="password-input">
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="resetPasswordForm.confirmPassword" type="password" placeholder="请再次输入密码" show-password
              class="password-input">
              <template #prefix>
                <el-icon>
                  <Lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="drawer-footer">
          <el-button @click="handleResetPasswordClose" class="cancel-btn">
            取消
          </el-button>
          <el-button type="primary" @click="handleResetPasswordSubmit" :loading="resetPasswordLoading"
            class="submit-btn">
            <el-icon>
              <Key />
            </el-icon>
            重置密码
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive ,watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Refresh, Search, User, Message, Phone, Calendar,
  CircleCheck, CircleClose, Edit, Key, Delete, Loading, DocumentDelete,
  Upload, Download, Notebook
} from '@element-plus/icons-vue'
import StudentFormDrawer from '@/components/AdminInfo/StudentFormDrawSimple.vue'
import { get, post, simpleDelete, simpleEnable ,StudentresetPassword} from '@/axios'

// 响应式数据
const loading = ref(false)
const searchName = ref('')
const searcherStudentCode = ref('')
const filterClass = ref('')

const tableData = ref([])

// 重置密码相关状态
const resetPasswordVisible = ref(false)
const resetPasswordLoading = ref(false)
const resetPasswordFormRef = ref()
const currentResetAdmin = ref({})

// 重置密码表单数据
const resetPasswordForm = reactive({
  id:'',
  name: '',
  email: '',
  newPassword: '',
  confirmPassword: ''
})

// 分页参数
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
})

// 抽屉相关状态
const drawerVisible = ref(false)
const isEditMode = ref(false)
const currentStudent = ref({})

// 在script中添加formatCourses方法
const formatCourses = (courses) => {
  if (Array.isArray(courses)) {
    return courses.join('、'); // 使用中文顿号分隔
  } else if (typeof courses === 'string') {
    // 处理字符串类型的科目数据
    const separators = [',', '，', ';', '；', '/', '|'];
    for (const sep of separators) {
      if (courses.includes(sep)) {
        return courses.split(sep).filter(Boolean).join('、');
      }
    }
    return courses;
  }
  return '无';
};

// 计算属性
/*const filteredTableData = computed(() => {
  let filtered = tableData.value

  if (filterClass.value) {
    filtered = filtered.filter(item => item.class === filterClass.value)
  }

  if (searchKeyword.value) {
    filtered = filtered.filter(item =>
      item.name.includes(searchKeyword.value) ||
      item.studentId.includes(searchKeyword.value)
    )
  }

  return filtered
})*/

// 获取状态标签类型
const getStatusTagType = (status) => {
  const statusTypes = {
    '在校': 'success',
    '休学': 'warning',
    '退学': 'danger',
    '毕业': 'info'
  }
  return statusTypes[status] || 'info'
}

// 加载数据
const loadData = async () => {
   loading.value = true;
  try {
    const response = await get('/umsStudent/page', {
      page: pagination.value.current,
      size: pagination.value.pageSize,
      realName: searchName.value,
      studentCode: searcherStudentCode.value,
      school: filterClass.value
    });

    tableData.value = (response.records || []).map(item => ({
      ...item,
      status: item.status === true ? '在校' : '休学', // 转换状态为前端显示格式
      coursesTaught: typeof item.coursesTaught === 'string' 
        ? item.coursesTaught.split(',') 
        : item.coursesTaught || []
    }));

    pagination.value.total = response.total || 0;
  } catch (error) {
    console.error('加载失败:', error);
    ElMessage.error('数据加载失败: ' + error.message);
  } finally {
    loading.value = false;
  }
}

// 刷新
const handleRefresh = () => {
  searchName.value = ''
  searcherStudentCode.value = ''
  filterClass.value = ''
  loadData()
}

// 搜索处理
const handleSearch = () => {
  pagination.value.current = 1
  loadData()
}

// 监听搜索条件变化
watch([searchName, searcherStudentCode, filterClass], () => {
  handleSearch()
});

// 新增和编辑
const handleAdd = () => {
  isEditMode.value = false
  currentStudent.value = null
  drawerVisible.value = true
}

const handleEdit = (row) => {
   isEditMode.value = true;
  currentStudent.value = { 
    ...row,
    status: row.status === true ? '在校' : '休学'
  };
  drawerVisible.value = true;
}

// 处理表单提交
const handleFormSubmit =async (formData) => {
  await loadData();
  drawerVisible.value = false
   ElMessage.success(isEditMode.value ? '学生信息更新成功' : '添加学生成功');
}

// 重置密码表单验证规则
const resetPasswordRules = {
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!/(?=.*[a-zA-Z])/.test(value)) {
          callback(new Error('密码必须包含字母'));
        } else if (!/(?=.*\d)/.test(value)) {
          callback(new Error('密码必须包含数字'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== resetPasswordForm.newPassword) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

// 打开重置密码抽屉
const handleResetPassword = (row) => {
  currentResetAdmin.value = row;
  resetPasswordForm.id=row.id;
  resetPasswordForm.name = row.realName||row.username;
  resetPasswordForm.email = row.email;
  resetPasswordForm.newPassword = '';
  resetPasswordForm.confirmPassword = '';
  resetPasswordVisible.value = true;
};

// 重置密码提交方法
const handleResetPasswordSubmit = async () => {
  try {
    await resetPasswordFormRef.value.validate()

    resetPasswordLoading.value = true

    // 调用重置密码接口
    const response = await StudentresetPassword(
      resetPasswordForm.id,
      resetPasswordForm.newPassword
    )
  } catch (error) {
    // 区分不同类型的错误
  } finally {
    resetPasswordLoading.value = false;
  }
}

// 关闭重置密码抽屉
const handleResetPasswordClose = () => {
  resetPasswordVisible.value = false
  // 重置表单
  resetPasswordForm.name = ''
  resetPasswordForm.email = ''
  resetPasswordForm.newPassword = ''
  resetPasswordForm.confirmPassword = ''

  resetPasswordFormRef.value?.resetFields()
}

// 其他操作
const handleImport = () => {
  ElMessage.info('批量导入功能开发中...')
}

const handleExport = () => {
  ElMessage.info('导出数据功能开发中...')
}

const handleDelete = (row) => {
  ElMessageBox.confirm(`确定禁用学生 ${row.realName} 吗?`, '禁用确认')
    .then(async () => {
      try {
        loading.value = true
        const response = await simpleDelete('/umsStudent/' + row.id)
        if (response?.code === 200) {
          await loadData()
          ElMessage.success('禁用成功')
        } else {
          ElMessage.error(response?.message || '禁用失败')
        }
      } catch (error) {
        ElMessage.error(error.message ||'禁用失败')
      } finally {
        loading.value = false
      }
    })
    .catch(() => {
      console.log('用户取消禁用')
    })
}


// 启用学生
const handleEnable = async (row) => {
  try {
    loading.value = true;
    const response = await simpleEnable(`/umsStudent/${row.id}?status=true`);
    if (response?.code === 200) {
      ElMessage.success('学生已启用');
      await loadData();
    } else {
      ElMessage.error(response?.message || '启用失败');
    }
  } catch (error) {
    console.error('启用失败:', error);
    ElMessage.error('启用失败: ' + (error.response?.data?.message || error.message));
  } finally {
    loading.value = false;
  }
};

// 分页处理
const handleSizeChange = (val) => {
  pagination.value.pageSize = val
  loadData()
}

const handleCurrentChange = (val) => {
  pagination.value.current = val
  loadData()
}



// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
// 主容器
.student-management {
  background: #f8fafc;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

// 页面头部美化
.page-header {
  background: linear-gradient(135deg, #8BE1F1 0%, #5CB6ED 100%);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.1)" points="0,1000 1000,0 1000,1000"/></svg>');
    background-size: cover;
  }

  .header-content {
    position: relative;
    z-index: 1;
    padding: 32px 24px;
  }

  .header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  .title-section {
    .page-title {
      font-size: 28px;
      font-weight: 700;
      margin: 0 0 12px 0;
      color: white;
      display: flex;
      align-items: center;
      gap: 12px;

      .title-icon {
        font-size: 32px;
      }
    }

    .page-description {
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
      font-size: 16px;
      font-weight: 400;
    }
  }

  .header-stats {
    display: flex;
    gap: 20px;

    .stat-card {
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 16px 20px;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.2);

      .stat-number {
        font-size: 24px;
        font-weight: 700;
        color: white;
        line-height: 1;
      }

      .stat-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 4px;
      }
    }
  }
}

// 操作栏美化
.action-bar {
  background: white;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #e5e7eb;

  .action-left {
    display: flex;
    gap: 12px;

    .action-btn {
      height: 40px;
      padding: 0 20px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;

      &.primary-btn {
        background: linear-gradient(135deg, #8BE1F1 0%, #5CB6ED 100%);
        border: none;
        box-shadow: 0 4px 12px rgba(139, 225, 241, 0.3);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(139, 225, 241, 0.4);
        }
      }

      &.import-btn {
        background: #B5ECDF;
        border: none;
        color: #2D4A53;

        &:hover {
          background: #9FE2D0;
          transform: translateY(-2px);
        }
      }

      &.export-btn {
        background: #F7EEDD;
        border: none;
        color: #8B6D2F;

        &:hover {
          background: #F2E3C6;
          transform: translateY(-2px);
        }
      }

      &.refresh-btn {
        background: white;
        border: 1px solid #d1d5db;
        color: #6b7280;

        &:hover {
          background: #f9fafb;
          border-color: #9ca3af;
          color: #374151;
        }
      }
    }
  }

  .action-right {
    .search-container {
      display: flex;
      gap: 8px;
      align-items: center;

      .search-input {
        width: 300px;

        :deep(.el-input__wrapper) {
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
          border: 1px solid #e5e7eb;
          transition: all 0.3s ease;

          &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }

          &.is-focus {
            box-shadow: 0 0 0 3px rgba(139, 225, 241, 0.1);
            border-color: #8BE1F1;
          }
        }
      }

      .search-btn {
        height: 40px;
        border-radius: 8px;
        background: #8BE1F1;
        border: none;

        &:hover {
          background: #7AD1E1;
        }
      }
    }
  }
}

// 表格容器美化
.table-container {
  padding: 24px;

  .table-wrapper {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
}

// 表格美化
.enhanced-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      font-size: 14px;
      border-bottom: 2px solid #e5e7eb;
    }
  }

  :deep(.el-table__row) {
    transition: all 0.3s ease;

    &:hover {
      background: #f8fafc !important;
      transform: scale(1.005);
    }

    td {
      border-bottom: 1px solid #f3f4f6;
      padding: 12px 0;
    }
  }

  // 头像容器
  .avatar-container {
    position: relative;
    display: inline-block;

    .user-avatar {
      border: 3px solid #e5e7eb;
      transition: all 0.3s ease;

      &:hover {
        border-color: #8BE1F1;
      }
    }

    .avatar-status {
      position: absolute;
      bottom: 2px;
      right: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ef4444;
      border: 2px solid white;

      &.online {
        background: #10b981;
      }
    }
  }

  // ID标签
  .id-tag {
    font-family: 'Courier New', monospace;
    font-weight: 600;
  }

  // 学号
  .student-id {
    background: #f3f4f6;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #374151;
  }

  // 姓名单元格
  .name-cell {
    .name-text {
      font-weight: 600;
      color: #1f2937;
    }
  }

  // 性别标签
  .gender-tag {
    border-radius: 12px;
    padding: 4px 8px;
  }

  // 班级标签
  .class-tag {
    background: linear-gradient(135deg, #8BE1F1 0%, #5CB6ED 100%);
    color: white;
    border: none;
    font-weight: 500;
  }

  // 专业单元格
  .major-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;

    .major-icon {
      color: #9ca3af;
    }
  }

  // 邮箱和电话单元格
  .email-cell,
  .phone-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;

    .email-icon,
    .phone-icon {
      color: #9ca3af;
    }
  }

  // 时间单元格
  .time-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 13px;

    .time-icon {
      color: #9ca3af;
    }
  }

  // 状态标签
  .status-tag {
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;

    .status-icon {
      font-size: 14px;
    }

    &.status-active {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      border: none;
    }

    &.status-inactive {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: white;
      border: none;
    }
  }

  // 操作按钮
  .action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    .action-btn-small {
      height: 32px;
      padding: 0 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 4px;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }

      &.edit-btn {
        background: #8BE1F1;
        border: none;
        color: white;
      }

      &.reset-btn {
        background: #F7EEDD;
        border: none;
        color: #8B6D2F;
      }

      &.delete-btn {
        background: #ef4444;
        border: none;
      }

      &.enable-btn {
        background: #10b981;
        border: none;
        color: white;
      }
    }
  }

  // 空状态
  .empty-container {
    padding: 40px;

    .loading-content,
    .empty-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: #9ca3af;

      .loading-icon,
      .empty-icon {
        font-size: 48px;
        color: #d1d5db;
      }

      .loading-icon {
        animation: spin 1s linear infinite;
      }
    }
  }
}

// 分页美化
.pagination-container {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  background: white;

  .enhanced-pagination {
    :deep(.el-pagination__total) {
      color: #6b7280;
      font-weight: 500;
    }

    :deep(.el-pager li) {
      border-radius: 6px;
      margin: 0 2px;
      transition: all 0.3s ease;

      &:hover {
        background: #f3f4f6;
      }

      &.is-active {
        background: #8BE1F1;
        color: white;
      }
    }

    :deep(.btn-prev),
    :deep(.btn-next) {
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        background: #f3f4f6;
      }
    }
  }
}

// 重置密码抽屉样式优化
.reset-password-drawer {
  :deep(.el-drawer) {
    border-radius: 12px 0 0 12px;
    overflow: hidden;
  }

  :deep(.el-drawer__header) {
    background: linear-gradient(135deg, #8BE1F1 0%, #5CB6ED 100%);
    padding: 0;
    margin: 0;
    border-bottom: none;
  }

  :deep(.el-drawer__body) {
    padding: 0;
    background: #f8fafc;
  }

  .drawer-header {
    padding: 24px 24px 20px 24px;
    background: linear-gradient(135deg, #8BE1F1 0%, #5CB6ED 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.1)" points="0,1000 1000,0 1000,1000"/></svg>');
      background-size: cover;
    }

    .drawer-icon {
      font-size: 24px;
      color: white;
      z-index: 1;
      position: relative;
    }

    .drawer-title {
      font-size: 20px;
      font-weight: 700;
      color: white;
      z-index: 1;
      position: relative;
    }
  }

  .drawer-content {
    padding: 24px;
    background: white;
    margin: 0;
    min-height: calc(100vh - 200px);
  }

  .admin-info-card {
    background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 100%);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(139, 225, 241, 0.05) 0%, rgba(92, 182, 237, 0.05) 100%);
    }

    .admin-avatar {
      width: 64px;
      height: 64px;
      border: 4px solid white;
      box-shadow: 0 4px 12px rgba(139, 225, 241, 0.2);
      position: relative;
      z-index: 1;
    }

    .admin-details {
      flex: 1;
      position: relative;
      z-index: 1;

      h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
        line-height: 1.2;
      }

      p {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;

        &::before {
          content: '✉';
          color: #8BE1F1;
        }
      }
    }
  }

  .reset-form {
    .el-form-item {
      margin-bottom: 24px;

      :deep(.el-form-item__label) {
        font-weight: 600;
        color: #374151;
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 8px;
      }

      :deep(.el-form-item__content) {
        .password-input {
          .el-input__wrapper {
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            border: 2px solid #e5e7eb;
            transition: all 0.3s ease;
            padding: 12px 16px;
            background: #fafbfc;

            &:hover {
              box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
              border-color: #d1d5db;
              background: white;
            }

            &.is-focus {
              box-shadow: 0 0 0 4px rgba(139, 225, 241, 0.15);
              border-color: #8BE1F1;
              background: white;
            }

            .el-input__prefix {
              color: #9ca3af;
              margin-right: 8px;
            }

            .el-input__suffix {
              .el-input__password {
                color: #6b7280;
              }
            }
          }

          .el-input__inner {
            color: #374151;
            font-weight: 500;
            
            &::placeholder {
              color: #9ca3af;
              font-weight: 400;
            }
          }
        }

        .el-form-item__error {
          color: #ef4444;
          font-size: 12px;
          margin-top: 6px;
          font-weight: 500;
        }
      }
    }
  }

  :deep(.el-drawer__footer) {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 1) 100%);
    padding: 20px 24px 24px 24px;
    border-top: 1px solid #e5e7eb;
  }

  .drawer-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;

    .cancel-btn {
      height: 44px;
      padding: 0 24px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 15px;
      background: white;
      border: 2px solid #e5e7eb;
      color: #6b7280;
      transition: all 0.3s ease;

      &:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        color: #374151;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .submit-btn {
      height: 44px;
      padding: 0 24px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 15px;
      background: linear-gradient(135deg, #8BE1F1 0%, #5CB6ED 100%);
      border: none;
      color: white;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 16px rgba(139, 225, 241, 0.3);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(139, 225, 241, 0.4);
        background: linear-gradient(135deg, #7AD1E1 0%, #4BA8DD 100%);
      }

      &:active {
        transform: translateY(-1px);
      }

      &.is-loading {
        opacity: 0.8;
        cursor: not-allowed;
      }

      .el-icon {
        font-size: 16px;
      }
    }
  }
}

// 密码强度指示器样式增强
.password-strength-indicator {
  margin-top: 8px;
  
  .strength-bar {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    
    .strength-fill {
      height: 100%;
      border-radius: 2px;
      transition: all 0.3s ease;
      
      &.weak {
        width: 33%;
        background: linear-gradient(90deg, #ef4444 0%, #fca5a5 100%);
      }
      
      &.medium {
        width: 66%;
        background: linear-gradient(90deg, #f59e0b 0%, #fcd34d 100%);
      }
      
      &.strong {
        width: 100%;
        background: linear-gradient(90deg, #10b981 0%, #6ee7b7 100%);
      }
    }
  }
  
  .strength-text {
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
    
    &.weak {
      color: #ef4444;
    }
    
    &.medium {
      color: #f59e0b;
    }
    
    &.strong {
      color: #10b981;
    }
  }
}

// 动画
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .page-header {
    .header-main {
      flex-direction: column;
      gap: 20px;
      text-align: center;
    }

    .header-stats {
      justify-content: center;
    }
  }

  .action-bar {
    flex-direction: column;
    gap: 16px;

    .action-left,
    .action-right {
      width: 100%;
    }

    .search-container {
      flex-direction: column;

      .search-input {
        width: 100%;
      }
    }
  }

  .enhanced-table {
    :deep(.el-table__row) {
      &:hover {
        transform: none;
      }
    }
  }

  .reset-password-drawer {
    :deep(.el-drawer) {
      width: 100% !important;
      border-radius: 0;
    }

    .drawer-content {
      padding: 16px;
    }

    .admin-info-card {
      flex-direction: column;
      text-align: center;
      padding: 20px;

      .admin-details {
        h3 {
          font-size: 16px;
        }
      }
    }

    .drawer-footer {
      flex-direction: column;

      .cancel-btn,
      .submit-btn {
        width: 100%;
        height: 48px;
      }
    }
  }
}
</style>